<template>
  <div class="home-bg padding-20">
    <WorkTableEvent></WorkTableEvent>
    <div>
      <div class="flex justify-end padding-top-20"><ActButtons></ActButtons></div>
    </div>

    <!-- echarts展示 -->
    <div class="margin-top-bottom-20 flex">
      <div class="satae-box chart-box">
        <manage-satae pageType="group" ref="manage"></manage-satae>
      </div>
      <div class="split-line"></div>
      <div class="flex-1 chart-box">
        <lease-group-state ref="lease"></lease-group-state>
      </div>
      <div class="split-line"></div>
      <div class="flex-1 chart-box">
        <capture-group-state ref="capture"></capture-group-state>
      </div>
    </div>

    <div class="tab-self-box padding-top-20 padding-left-right-20 bg-color-fffff">
      <template v-for="item in tabList">
        <span :key="item.primaryKey" class="font-size-18 tab-txt cursor-pointer padding-right-50" :class="activeName == item.primaryKey ? 'active-tab-color' : ''" @click="tabClick(item.primaryKey)">{{ item.packageName }}</span>
      </template>
      <div class="date-box">
        <el-date-picker size="mini" :clearable="false" v-model="searchValue" type="year" placeholder="请选择" @change="getPackageList(1)"> </el-date-picker>
      </div>
    </div>
    <div class="group-operation-box bg-color-fffff">
      <data-list :tableData.sync="tableData" ref="dataList" @updateList="updateList"></data-list>
      <div style="margin-top: 20px; display: flex; justify-content: flex-end" type="flex" justify="end" v-if="queryParams.total">
        <el-pagination background layout="total, prev, pager, next" @current-change="getPackageList" :current-page="queryParams.currentPage" :page-size="queryParams.pageSize" :total="queryParams.total"> </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import dataList from './components/dataList';
  import Api from '../../api/incomeAndExpenditurePlan';
  import captureGroupState from '@c/homeChart/captureGroupState.vue';
  import LeaseGroupState from '@c/homeChart/leaseGroupState.vue';
  import ManageSatae from '@c/homeChart/manageSatae.vue';
  import WorkTableEvent from '@/pages/businessAssets/modeules/workTableEvent';
  import ActButtons from '@/pages/businessAssets/modeules/actButtons';
  export default {
    data() {
      return {
        activeName: null,
        searchValue: new Date(),
        tabList: [],
        queryParams: {
          pageSize: 10,
          currentPage: 1,
          total: 0,
        },
        tableData: [],
      };
    },
    mounted() {
      this.getTabList();
    },
    methods: {
      async getTabList() {
        let res = await Api.apiBasicPackageResourceList();
        if (res && res.success && res.rows.length > 0) {
          this.tabList = res.rows;
          this.activeName = this.tabList[0].primaryKey ? this.tabList[0].primaryKey : null;
          this.getPackageList();
        }
      },
      async getPackageList(currentPage = 1) {
        this.queryParams.currentPage = currentPage || this.queryParams.currentPage;

        let res = await Api.apiBasicPackageList({
          year: this.searchValue,
          packageKey: this.activeName,
          currentPage: this.queryParams.currentPage,
          pageSize: this.queryParams.pageSize,
        });
        if (res && res.success) {
          this.tableData = res.rows || [];
          this.queryParams.total = parseInt(res.total);
        }
      },
      tabClick(key) {
        this.activeName = key;
        this.getPackageList(1);
      },
      updateList() {
        this.getPackageList();
      },
    },
    components: {
      dataList,
      WorkTableEvent,
      ActButtons,
      ManageSatae,
      captureGroupState,
      LeaseGroupState,
    },
  };
</script>
<style lang="scss">
  .tab-menu-box {
    position: sticky;
    z-index: 100;
    height: 44px;
    padding: 0 30px;
    border-bottom: 1px solid #e5e5e5;
    margin-top: 6px;
    .tab-box {
      width: 100%;
      display: flex;
      align-items: center;
      border-bottom: unset !important;
      height: 44px;
      box-sizing: border-box;
      overflow: hidden;
      padding-top: 0;
      .el-tabs {
        flex: 1;

        .el-tabs__header {
          margin-bottom: 0;
        }
      }
    }
    .tab-right-box {
      display: flex;
      align-items: center;
      height: 40px !important;
      padding: 5px 0;
      .button-box {
        .el-button {
          margin-left: 10px;
        }

        .is-round {
          border-radius: 17px;
          min-width: 80px;
        }
      }

      .time-select {
        margin: 0 !important;
        width: 200px;
        margin-left: 15px;
      }
    }
  }

  .date-box {
    position: absolute;
    width: 200px;
    top: 15px;
    right: 10px;
  }
  .satae-box {
    width: 400px;
  }
  .split-line {
    width: 20px;
    background: #f8f8f8;
  }
  .chart-box {
    height: 500px;
  }
</style>
